<template>
  <div class="topnav">
    <div class="topbar" ref="topBar">
      <el-tabs v-model="activeName" @tab-click="handleClick" v-show="userInfo.userId">
        <el-tab-pane label="收藏的专辑" name="first">
          <div class="sub-albums">
            <div class="album-item" v-for="album in subAlbums" :key="album.id">
              <div class="album-img" @click="$router.push('/albums/' + album.id)">
                <img :src="album.picUrl">
                <span class="iconfont icon-zhuanji1"></span>
              </div>
              <div class="album-info">
                <p class="album-name" @click="$router.push('/albums/' + album.id)">{{ album.name }}<span
                    v-show="album.alias && album.alias.length > 0">({{
                    album.alias[0]
                    }})</span></p>
                <span class="artist-name" @click="$router.push('/artists/' + album.artists[0].id)">{{
                album.artists[0].name
                }}</span>
                <span class="song-count">{{ album.size }}首</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的数字专辑" name="second">
          <div class="sub-albums">
            <div class="album-item" v-for="album in myAlbums" :key="album.albumId">
              <div class="album-img" @click="$router.push('/albums/' + album.albumId)">
                <img :src="album.cover">
                <span class="iconfont icon-zhuanji1"></span>
              </div>
              <div class="album-info">
                <p class="album-name" @click="$router.push('/albums/' + album.albumId)">{{ album.albumName }}<span
                    v-show="album.aliasName">({{
                    album.aliasName
                    }})</span></p>
                <span class="artist-name" @click="$router.push('/artists/' + album.artist.id)">{{ album.artist.name
                }}</span>
                <span class="song-count">{{ album.boughtCount }}张</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="关注的歌手" name="third">
          <div class="sub-albums">
            <div class="album-item" v-for="album in myArtists" :key="album.id">
              <div class="album-img" @click="$router.push('/artists/' + album.id)">
                <img :src="album.picUrl">
              </div>
              <div class="album-info">
                <p class="album-name" @click="$router.push('/artists/' + album.id)">{{ album.name }}<span
                    v-show="album.trans">({{
                    album.trans
                    }})</span></p>
                <span class="artist-name">专辑：{{ album.albumSize }}</span>
                <span class="song-count">MV：{{ album.mvSize }}</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="收藏的视频" name="fourth">
          <div class="mv-list">
            <div class="mv-item" v-for="item in MyMvs" :key="item.vid">
              <div class="mv-img" @click="$router.push('/mv/' + item.vid)">
                <img :src="item.coverUrl">
                <span class="play-count"><i class="el-icon-caret-right"></i>{{ item.playTime > 100000 ? (item.playTime
                / 10000).toFixed(0) +
                '万' : item.playTime
                }}</span>
                <span class="mv-time">{{ item.durationms | format }}</span>
              </div>
              <p class="mv-name">
                <el-tag type="danger" size="mini">MV</el-tag>
                <span>{{ item.title }}</span>
              </p>
              <span class="arname" @click="$router.push('/artists/' + item.creator[0].userId)">{{
              item.creator[0].userName
              }}</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="topS"></div>
      <span class="iconfont icon-shangla" @click="fadeOut" v-show="!flag"></span>
      <span class="iconfont icon-shangla1" @click="fadeIn" v-show="flag"></span>
    </div>
  </div>
</template>

<script>
import '@/incofont/font1/iconfont.css'
import { animate } from '@/components/utils/animate.js'
import axios from '@/request/request'
import { mapState } from 'vuex'
export default {
  name: 'Masks',
  data() {
    return {
      flag: true,
      flag1: true,
      subAlbums: [],
      activeName: 'first',
      myAlbums: [],
      myArtists: [],
      MyMvs: []
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrolltoTop, true)
    this.scrolltoTop()
  },
  filters: {
    format(time) {
      let m = (time / 1000 / 60).toFixed(0)
      m = m < 10 ? '0' + m : m
      let s = (time / 1000 % 60).toFixed(0)
      s = s < 10 ? '0' + s : s
      return m + ':' + s
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  methods: {
    fadeIn() {
      if (this.$route.path != '/home' || !localStorage.getItem('token')) return
      this.flag = false
      animate(this.$refs.topBar, 0, () => {
        this.flag = false
        this.getUserSubAlbums()
      })
    },
    fadeOut() {
      if (this.$route.path != '/home') return
      animate(this.$refs.topBar, -560, () => {
        this.flag = true
        this.scrolltoTop()
      })
    },
    scrolltoTop() {
      if (this.$route.path != '/home') return
      if (window.scrollY >= 150 && this.flag == true) {
        animate(this.$refs.topBar, -650, () => {
          this.flag = true
        })
      } else if (this.flag == true) {
        if (this.$route.path != '/home') return
        animate(this.$refs.topBar, -560)
      }
    },
    // 获取用户收藏的专辑
    async getUserSubAlbums() {
      const { data: res } = await axios.get(`/album/sublist`)
      if (res.code == 200) {
        this.subAlbums = res.data
      }
    },
    // 获取我的数字专辑
    async getMyAlums() {
      const { data: res } = await axios.get('/digitalAlbum/purchased')
      if (res.code == 200) {
        this.myAlbums = res.paidAlbums
      }
    },
    // 获取收藏的歌手列表
    async getMyArtists() {
      const { data: res } = await axios.get('/artist/sublist')
      if (res.code == 200) {
        this.myArtists = res.data
      }
    },
    // 获取收藏的MV列表
    async getMyMvs() {
      const { data: res } = await axios.get('/mv/sublist')
      if (res.code == 200) {
        this.MyMvs = res.data
      }
    },
    handleClick(tab) {
      if (this.activeName == 'second') {
        this.getMyAlums()
      } else if (this.activeName == 'third') {
        this.getMyArtists()
      } else if (this.activeName == 'fourth') {
        this.getMyMvs()
      }
    }
  }
}
</script>

<style lang="less" scoped>
@maskBgc: rgba(0, 0, 0, 0.5);

.topnav {
  width: 100%;

  .topbar {
    box-sizing: border-box;
    position: fixed;
    top: -650px;
    left: 0;
    width: 100%;
    height: 550px;
    background-color: @maskBgc;
    // background-image: url(~@/assets/images/星空下的尘埃.png);
    z-index: 100;
    padding-top: 90px;

    .sub-albums {
      display: flex;
      justify-content: space-between;
      align-content: flex-start;
      flex-wrap: wrap;
      width: 100%;
      height: 400px;
      box-sizing: border-box;
      padding: 0 30px;
      overflow-y: overlay;
      cursor: default;

      .album-item {
        display: flex;
        justify-content: space-between;
        width: 30%;
        height: 80px;
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 4px;
        margin-bottom: 20px;

        .album-img {
          position: relative;
          width: 80px;
          height: 80px;
          border-radius: 4px;

          img {
            z-index: 5;
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            border-radius: 4px;
            overflow: hidden;
          }

          .icon-zhuanji1 {
            z-index: 3;
            position: absolute;
            top: 50%;
            right: -35px;
            transform: translateY(-50%);
            font-size: 60px;
            color: rgb(30, 30, 30);
          }
        }

        .album-info {
          width: 82%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // margin-left: 40px;

          .album-name {
            width: 60%;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff;
            text-align: start;

            span {
              color: rgb(227, 227, 227);
              margin-left: 5px;
            }
          }

          .artist-name {
            width: 20%;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: rgb(227, 227, 227);

          }

          .song-count {
            width: 20%;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: rgb(227, 227, 227);

          }
        }
      }
    }

    // 视频展示区域
    .mv-list {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
      padding: 0 20px;
      cursor: default;

      .mv-item {
        width: 15%;
        height: 190px;
        text-align: start;
        margin-bottom: 20px;
        // background-color: pink;

        .mv-img {
          position: relative;
          width: 100%;
          height: 150px;
          border-radius: 4px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            transition: all 0.5s;

            &:hover {
              transform: scale(1.2);
            }
          }

          .play-count {
            position: absolute;
            top: 5px;
            right: 10px;
            color: rgb(255, 255, 255);
            font-size: 13px;


            .el-icon-caret-right {
              font-size: 15px;
            }
          }

          .mv-time {
            position: absolute;
            bottom: 5px;
            right: 10px;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: rgb(255, 255, 255);
          }
        }

        .mv-name {
          margin: 0;
          text-align: start;
          font-size: 13px;
          margin-top: 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .arname {
          display: inline-block;
          margin-top: 5px;
          font-size: 13px;
          color: rgb(214, 214, 214);
        }

        /deep/ .el-tag--mini {
          box-sizing: border-box;
          height: 14px;
          line-height: 14px;
          padding: 0 2px;
          margin-right: 3px;
        }
      }
    }

    /deep/ .el-tabs__nav {
      float: none;

      .el-tabs__active-bar {
        height: 0;
      }
    }

    /deep/ .el-tabs__nav-wrap::after {
      height: 0;
    }

    /deep/ .el-tabs__item.is-active {
      color: rgb(215, 118, 57);
      font-size: 18px;
      font-weight: 600;
    }

    /deep/ .el-tabs__item {
      font-size: 16px;
      color: rgb(243, 243, 243);
    }

    .topS {
      position: absolute;
      left: 0;
      bottom: -150px;
      width: 0;
      border-top: 150px solid @maskBgc;
      border-right: 50vw solid transparent;
      border-bottom: 0;
      border-left: 50vw solid transparent;
    }

    .icon-shangla,
    .icon-shangla1 {
      position: absolute;
      left: 50%;
      bottom: -130px;
      transform: translateX(-50%);
      font-size: 34px;
      color: rgb(255, 255, 255);
    }
  }
}
</style>